<template>
  <el-calendar ref="calendar">
    <template #header="{ date }">
      <span>{{ date }}</span>
      <el-button-group>
        <el-button size="small" @click="selectDate('prev-year')">去年</el-button>
        <el-button size="small" @click="selectDate('prev-month')">上个月</el-button>
        <el-button size="small" @click="selectDate('today')">今天</el-button>
        <el-button size="small" @click="selectDate('next-month')">下个月</el-button>
        <el-button size="small" @click="selectDate('next-year')">明年</el-button>
      </el-button-group>
    </template>
  </el-calendar>
</template>

<script setup>
import {ref} from 'vue'
import {ElCalendar} from 'element-plus'

const calendar = ref(null)
const selectDate = (val) => {
  if (calendar.value) {
    calendar.value.selectDate(val)
  }
}
</script>